﻿@** Copyright 2013 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*@

@using Nop.Core.Infrastructure
@using Nop.Core
@model SevenSpikes.Nop.Plugins.CloudZoom.Models.CloudZoomModel
@if (Model.DefaultPicture.FullSizeImageUrl != null && Model.DefaultPicture.FullSizeImageUrl != String.Empty)
{
    Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Styles/CloudZoom.common.css");
    Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Themes/" + Model.Theme + "/Content/cloud-zoom.1.0.2/CloudZoom.css");

    Html.AppendScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js");
    Html.AppendScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/cloud-zoom.1.0.2/cloud-zoom.1.0.2.min.js");

    if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
    {
        // add css and javascript file for carousel of the thumbnails
        Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Themes/" + Model.Theme + "/Content/jcarousel/jcarousel.css");
        Html.AppendScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/jcarousel/jquery.jcarousel.min.js");
        Html.AppendScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/jcarousel/jquery.disable.text.select.js");
    }

    var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
    if (supportRtl)
    {
        Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Styles/CloudZoom.common.rtl.css");

        if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
        {
            Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Themes/" + Model.Theme + "/Content/jcarousel/jcarousel.rtl.css");
        }
    }

    if (Model.IsIntegratedByWidget)
    {
        Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/cloud-zoom-custom.min.js");
    }

    if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
    {
        var imagesCount = 0;
        if (Model.Pictures != null && Model.Pictures.Count > 0)
        {
            imagesCount = Model.Pictures.Count;
        }
        
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('#carousel').jcarousel({
                vertical: false,
                scroll: 1,
                numVisible: 3,
                wrap: 'both',
                size: @imagesCount,
                rtl: @supportRtl.ToString(System.Globalization.CultureInfo.InvariantCulture).ToLower()
                });

            jQuery(".jcarousel-prev, .jcarousel-next").disableTextSelect();
        });
    </script>
        
    }

    var sb = new System.Text.StringBuilder();
    foreach (var imageUrl in Model.Pictures)
    {
        sb.AppendFormat("[\"{0}\"],", imageUrl.FullSizeImageUrl);
    }

    var links = sb.ToString();
    if (links.EndsWith(","))
    {
        links = links.Remove(links.Length - 1, 1);
    }

    links = "[" + links + "]";

    if (Model.EnableClickToZoom)
    {
        Html.AppendScriptParts("~/Scripts/slimbox2.js");
	
    <script type="text/javascript">

        function clickToZoom() {

            var imagesUrls = @Html.Raw(links);
            var currentProductImageUrl = $("#zoom1").attr("href");

            var startingImage = 0;

            $.each(imagesUrls, function(index, value) {
                if(value[0] == currentProductImageUrl)
                {
                    startingImage = index;
                }
            });

            jQuery.slimbox(imagesUrls, startingImage, { loop:true });
        };

        $(document).ready(function () {
            $(".picture").on("click", ".mousetrap", function () {
                clickToZoom(); 
            });
        });
    </script>
    }
    <div class="gallery">
        <div class="picture" id="sevenspikes-cloud-zoom" data-zoomWindowElementId="@Model.ElementId" 
         data-selectorOfTheParentElementOfTheCloudZoomWindow="@Model.SettingsModel.SelectorOfTheParentElementOfTheCloudZoomWindow" 
         data-defaultImageContainerSelector="@Model.SettingsModel.DefaultImageContainerSelector">
            <a href="@Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@Model.DefaultPicture.DefaultRelation">
                <img src="@Model.DefaultPicture.SmallImageUrl" alt="@Model.DefaultPicture.AlternateText" title="@Model.DefaultPicture.Title" id="cloudZoomImage" />
            </a>
        </div>
        @if (Model.Pictures.Count > 1)
        {
            <div class="picture-thumbs">
                @if (Model.SettingsModel.EnablePictureThumbnailsInCarousel)
                {
                    <ul id="carousel" class="jcarousel jcarousel-skin-thumbs">
                        @foreach (var picture in Model.Pictures)
                        {
                            <li><a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
                                <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title"/>
                            </a></li>
                        }
                    </ul>
                }
                else
                {
                    foreach (var picture in Model.Pictures)
                    {
                    <a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
                        <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                    </a>
                    }
                }

            </div>
        }

    </div>
}
